<template>
    <div class="top-nav" :style="{ backgroundColor: list.NavColor, }">
        <img src="@/assets/images/topNavBlack.png">
        <span class="tit" :style="{color: list.FontColor}">{{ list.title }}</span>
    </div>
</template>

<script>
    export default {
        name: 'info',
        props: ['data'],
        data() {
            return {
                list: {}
            }
        },
        mounted() {
            this.list = this.data
        }
    }
</script>

<style lang="less" scoped>
    .top-nav {
        position: absolute;
        top: 0;
        /* background: #fff; */
        z-index: 9999;
        transition: all .3s;

        & * {
            pointer-events: none;
        }

        /* &:hover {
            transform: scale(0.95);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 10px #afafaf;
        } */

        .tit {
            position: absolute;
            left: 50%;
            bottom: 16px;
            transform: translateX(-50%);
            font-size: 18px;
        }

        img {
            max-width: 100%;
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
        }
    }
</style>